<template>
  <div class="cate-record">
    <p class="title">类目变更记录</p>
    <el-table ref="tableRef" border :height="200" :data="list">
      <el-table-column type="index" width="70" label="序号" />
      <el-table-column label="变更时间" prop="createTime" :formatter="(row, column, cellValue, index) => $formater.formatTime(cellValue)" />
      <el-table-column label="审核状态" prop="operateType">
        <template #default="scope">
          <span v-if="scope.row.operateType === 'PASS'" style="color: green">{{ $formater.formatCateStatus(scope.row.operateType) }}</span>
          <span v-else-if="scope.row.operateType === 'COMMIT'" style="color: orange">{{ $formater.formatCateStatus(scope.row.operateType) }}</span>
          <span v-else style="color: red">{{ $formater.formatCateStatus(scope.row.operateType) }}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="220">
        <template #default="scope">
          <div style="display: flex">
            <Link class="cate-link" label="查看变更信息" :underline="true" @click="onShowChangeClick(scope.row)" />

            <el-tooltip popper-class="tooltip" effect="light" placement="bottom">
              <div>
                <Link class="cate-link" v-if="scope.row.operateType === 'REJECT'" label="驳回原因" :underline="true" />
              </div>
              <template #content>
                <h4>驳回原因</h4>
                <div class="reason">{{ scope.row.remark }}</div>
              </template>
            </el-tooltip>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <ChangeCate v-model:visible="changeCateVisible" :changeCateInfo="userInfo.currentApplyCate" />
</template>

<script setup>
import { ref, reactive, onMounted, nextTick } from 'vue'
import Link from '@/components/button/link.vue'
import { calcTableHeight } from '@/assets/js/utils.js'
import ChangeCate from './view.vue'
const { tableRef, tableHeight } = calcTableHeight()

defineProps(['list'])

const userInfo = reactive({
  currentApplyCate: {}
})
const changeCateVisible = ref(false)

const onShowChangeClick = (row) => {
  changeCateVisible.value = true
  nextTick(() => {
    userInfo.currentApplyCate = Object.assign({}, row)
  })
}
</script>
<style scoped lang="scss">
.cate-record {
  margin-top: 40px;

  .title {
    line-height: 20px;
    font-weight: 500;
    margin-bottom: 10px;
  }

  .cate-link {
    color: #0486fe;
    line-height: 16px;
    margin-right: 15px;
  }

  .cate-link.el-link.el-link--default:after {
    border-color: #0486fe !important;
  }
}
</style>
